<template>
	<view>
		<view class="map_container">
			<view class="openApp" @tap="openMap">
				打开高德地图
			</view>
			<web-view :src="mapSrc" style="height: 20vh;">
			</web-view>
			<!-- <map class="map" id="map" style="width: 100%;height: 100vh;" :longitude="longitude" :latitude="latitude"
				scale="16" :markers="markers"></map> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapSrc: '',
				title: 'map',
				ll: [116.39, 39.9],
				markers: [{
					iconPath: "../../img/mapicon_navi_s.png",
					id: 0,
					latitude: 39.989643,
					longitude: 116.481028,
					width: 23,
					height: 33
				}, {
					iconPath: "../../img/mapicon_navi_e.png",
					id: 0,
					latitude: 39.90816,
					longitude: 116.434446,
					width: 24,
					height: 34
				}],
				distance: '',
				cost: '',
				polyline: [],
				strLL: ""
			}
		},
		onLoad(e) {
			var that = this;
			this.strLL = e.ll;
			this.ll = e.ll.split(',');
			console.log('location =>>', this.ll);
			that.latitude = this.ll[1].trim();
			that.longitude = this.ll[0].trim();
			console.log('latitude =>>', this.latitude);
			console.log('longitude =>>', this.longitude);
			// 改标题
			this.$Request.getT(`/help/ip-address/${e.ll}/`).then((res) => {
				this.title = res.address;
				this.mapSrc =
					`https://m.amap.com/navi/?dest=${this.strLL}&destName=${this.title}&hideRouteIcon=1&key=e470f27a6126d4809336656bc77495fd`
				uni.setNavigationBarTitle({
					title: res.address
				})
			})
			// 获取地图
		},
		methods: {
			// 事件绑定
			zoomOn() {
				console.log("绑定事件!");
				map.on('zoomstart', mapZoomstart);
				map.on('zoomchange', mapZoom);
				map.on('zoomend', mapZoomend);
			},
			// 解绑事件
			zoomOff() {
				console.log("解除事件绑定!");
				map.off('zoomstart', mapZoomstart);
				map.off('zoomchange', mapZoom);
				map.off('zoomend', mapZoomend);
			},
			// 打开高德地图
			openMap() {
				let latitude = this.latitude
				let longitude = this.longitude
				let name = this.title
				let url = "";
				if (plus.os.name == "Android") {
					let hasBaiduMap = plus.runtime.isApplicationExist({
						pname: 'com.baidu.BaiduMap',
						action: 'baidumap://'
					});
					let hasAmap = plus.runtime.isApplicationExist({
						pname: 'com.autonavi.minimap',
						action: 'androidamap://'
					});
					let urlBaiduMap =
						`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
					urlBaiduMap = encodeURI(urlBaiduMap)
					let urlAmap =
						`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
					urlAmap = urlAmap(urlBaiduMap)
					if (hasAmap && hasBaiduMap) {
						plus.nativeUI.actionSheet({
							title: "选择地图应用",
							cancel: "取消",
							buttons: [{
								title: "百度地图"
							}, {
								title: "高德地图"
							}]
						}, function(e) {
							switch (e.index) {
								case 1:
									plus.runtime.openURL(urlBaiduMap);
									break;
								case 2:
									plus.runtime.openURL(urlAmap);
									break;
							}
						})
					} else if (hasAmap) {
						plus.runtime.openURL(urlAmap);
					} else if (hasBaiduMap) {
						plus.runtime.openURL(urlBaiduMap);
					} else {
						plus.nativeUI.alert("本机未安装指定的地图应用");
						// url = "geo:"+latitude+","+longitude+"?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";
						// plus.runtime.openURL(url); //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差  
					}
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "Apple地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						console.log("e.index: " + e.index);
						switch (e.index) {
							case 1:
								url =
									`http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=${latitude},${longitude}&spn=0.008766,0.019441`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url)
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			}
		}
	}
</script>
<style scoped>
	.openApp {
		z-index: 1000;
		background-color: #F56C6C;
		color: #FFFFFF;
		font-weight: 900;
		position: absolute;
		bottom: 5%;
		width: 50%;
		text-align: center;
		padding: 30upx;
		border-radius: 10px;
		left: 25%;
	}
</style>
